<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- document.documentElement  html
         document.body  body
         document.head  head
         

         常规元素 
         id getElementById
         class getElementsByClassName  返回的是一个伪数组
         tag   getElementsByTagName  返回的是一个伪数组
         name  getElementsByName  返回的是一个伪数组 
         选择器  querySelector  querySelectorAll


         childNodes  获取所有的子一级节点  包括文本节点 
         children  获取所有的子一级元素节点  不包括文本节点
         上面两个方法都是返回的是一个伪数组

        firstChild  获取第一个子节点 包括文本节点
        firstElementChild  获取第一个子元素节点 不包括文本节点


        lastChild  获取最后一个子节点 包括文本节点
        lastElementChild  获取最后一个子元素节点 不包括文本节点


        previousSibling  获取上一个兄弟节点 包括文本节点 表哥 堂哥 
        previousElementSibling  获取上一个兄弟元素节点 不包括文本节点 表哥 堂哥

        nextSibling  获取下一个兄弟节点 包括文本节点 表弟 堂弟
        nextElementSibling  获取下一个兄弟元素节点 不包括文本节点 表弟 堂弟


        parentNode  获取父节点

        parentElement  获取父元素节点

        attributes  获取当前元素的所有属性 



        
    
    
    
    
    
    -->
    <span>div之前  表哥</span>
    <div class="box" id="test" kangbazi='qf'>
        东风吹战鼓擂 当今世界谁怕谁
        <p>自信</p>

        <p>复出</p>
        <p>健康</p>
        <!-- 先有革命的本钱 -->
        适当的运动 
    </div>
    <span>div之后的 表弟</span>
    <script>
    var divEle = document.querySelector('div');
    //   console.log(divEle.childNodes); // 9
    // console.log(divEle.children);
    // console.log(divEle.firstChild);
    // console.log(divEle.firstElementChild);

    // console.log(divEle.lastChild);
    // console.log(divEle.lastElementChild);

    // console.log(divEle.previousSibling); // #text 表哥 堂哥是个文本节点 
    // // 空格 换行 属于文本节点 

    // console.log(divEle.previousElementSibling); // span 表哥 堂哥是个元素节点
    
    // console.log(divEle.nextSibling); // #text 表弟堂弟是个文本节点
    // // 空格 换行 属于文本节点 

    // console.log(divEle.nextElementSibling); // span 标签  元素 
    

    // alert(divEle.parentNode); // body  节点 
    // alert(divEle.parentElement); // body 元素节点  

    

        console.log(divEle.attributes);
        for(var k in divEle.attributes){
            console.log(k);
        }

    </script>
</body>
</html>